<template>
  <a-modal title="发送控车钥匙短信" width="85vw" v-model:visible="visible">
    <a-alert style="margin-bottom: 10px" type="warning">当前订单关联了多条虚拟钥匙控车单</a-alert>
    <table-index :table="table" @loadData="loadData" />
  </a-modal>
</template>
<script setup name="MessageModal">
  import { ref, reactive } from 'vue'
  import { getCarControlList } from '@/api/asset/virtualKey'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { getCarControlSms } from '@/api/asset/carTbox'
  import { Message } from '@arco-design/web-vue'

  // table 配置
  const table = useTable({
    columns: [
      { title: '控车单号', dataIndex: 'controlCode', fixed: 'left', width: 200 },
      { title: '控车人姓名', dataIndex: 'memberName', width: 80 },
      { title: '控车人手机号', dataIndex: 'memberPhone', width: 120 },
      { title: '车牌号', dataIndex: 'licenseNo', width: 110 },
      { title: '控车单开始时间', dataIndex: 'startTime', width: 180 },
      { title: '控车单结束时间', dataIndex: 'endTime', width: 180 },
    ],
    tableLoading: false,
    operates: [
      {
        label: '确认发送短信',
        method: (record) => {
          carControlSmsFn(record)
        },
      },
    ],
  })
  // 定义 queryParam
  const queryParam = reactive({
    statusList: [0, 1],
    pageSize: 100,
    pageNumber: 1,
    refType: undefined,
    refCode: undefined,
  })
  const visible = ref(false)
  const way = ref('')
  const loadData = () => {
    const fn = useFetchTableDataApi(table, queryParam, getCarControlList)
    fn()
  }

  // 发送控车钥匙短信
  const carControlSmsFn = (record) => {
    let fetch = getCarControlSms
    // 1：从短租短信发送  2：从长租短信发送   为空默认从虚拟钥匙控车单发送
    fetch({ id: record.id, type: way.value == 'short' ? 1 : 2 }).then((res) => {
      Message.success(res.result)
    })
  }

  const open = (record, type) => {
    visible.value = true
    queryParam.refCode = type == 'short' ? record.orderCode || '' : record.orderNo || ''
    queryParam.refType = type == 'short' ? 1 : 2
    way.value = type
    loadData()
  }

  defineExpose({
    open,
  })
</script>
<style lang="less" scoped>
  :deep(.arco-card) {
    background-color: inherit;
  }
  .order-fee-item {
    border-radius: 2px;
    padding: 16px 0;
    margin-bottom: 20px;
    .order-fee-item-header {
      margin-bottom: 8px;
      font-size: 14px;
      color: #1d2129;
      line-height: 22px;
      font-weight: 600;
    }
  }
  .edit-wrapper {
    max-height: calc(100vh - 210px);
  }
</style>
